<template>
  <div class="top">
    <headIndex :hindex="num" @getCat="valueChange"/>
      <div class="list">
          <div class="main_cer" style="background: #ffffff;padding:20px 20px 60px">
            <!----当前位置----->
            <div class="dqwz clearfix">
              <div class="wz fl">
                <span>当前位置</span>
                <span>></span>
                <span><a href="/home">首页</a></span>
                <span>></span>
                <span>{{firstName}}</span>
              </div>
              <div class="search_list fr clearfix">
                <input v-model="n_input" placeholder="" class="fl" />
                <div class="btn fr" @click="searchCont">
                  <i class="iconfont icon-sousuo"></i>
                </div>
              </div>
            </div>

            <!----列表----->
            <div class="cont clearfix">
              <!----左边----->
              <div class="list_menu fl">
                <div class="new_list">
                  <ul v-if="contList.length > 0">
                    <li v-for="(item,index) in contList">
                      <a v-if="item.returnurl && item.returnurl != ''" :href="item.returnurl" target="_blank" class="flex flex-align-center">
                        <div class="flex flex-align-center">
                          <i class="iconfont icon-fangkuai"></i>
                          <div class="wz">{{item.infotitle}}</div>
                        </div>
                        <p class="time">{{item.addtime}}</p>                        
                      </a>
                      <a v-else :href="'/article?id=' + item.infoid" target="_blank" class="flex flex-align-center">
                        <div class="flex flex-align-center">
                          <i class="iconfont icon-fangkuai"></i>
                          <div class="wz">{{item.infotitle}}</div>
                        </div>
                        <p class="time">{{item.addtime}}</p>                        
                      </a>
                    </li>
                  </ul>
                  <el-empty v-else description="暂无更多内容"></el-empty>
                </div>
                <div v-if="contList.length > 0" class="page fr">
                  <div class="flex flex-pack-center">
                    <el-pagination
                      :small="true"
                      :background="true"
                      @current-change="handleSizeChange"
                      :current-page="pageindex" 
                      :page-size="pagesize" 
                      layout="slot, prev, pager, next"
                      :total="retotal"
                      >
                      </el-pagination> 
                  </div>  
                </div>  
              </div>
              <!----右边----->
              <div class="new_two fr">
                <div class="tzgg">
                  <div class="tltle">通知公告</div>
                  <ul>
                    <li class="wb2" v-for="(item,index) in noticeList">
                      <a v-if="item.returnurl && item.returnurl != ''" :href="item.returnurl" target="_blank">{{item.infotitle}}</a>
                      <a v-else :href="'/article?id=' + item.infoid" target="_blank">{{item.infotitle}}</a>
                    </li>
                  </ul>
                </div>

                <div class="spxw">
                  <div class="tltle">视频新闻</div>
                  <ul v-if="flimList.length>0">
                    <li v-for="(item,index) in flimList" class="clearfix">
                      <a v-if="item.returnurl && item.returnurl != ''" :href="item.returnurl" target="_blank">
                         <div class="img fl">
                            <img :src="item.picurl">
                            <i class="iconfont icon-bofang1"></i>
                         </div>
                         <div class="txt wb4 fl">
                          {{item.infotitle}}
                         </div>
                      </a>
                      <a v-else :href="'/article?id=' + item.infoid" target="_blank">
                         <div class="img fl">
                            <img :src="item.picurl">
                            <i class="iconfont icon-bofang1"></i>
                         </div>
                         <div class="txt wb4 fl">
                          {{item.infotitle}}
                         </div>
                      </a>
                    </li>
                  </ul>
                  <el-empty v-else description="暂无更多内容"></el-empty>
                </div>

              </div>
            </div>

          </div>
      </div>
    <footIndex />
  </div>
</template>
<style lang="scss" scoped>
.el-pagination.is-background.el-pagination--small .btn-next,
.el-pagination.is-background.el-pagination--small .btn-prev,
.el-pagination.is-background.el-pagination--small .el-pager li{
  min-width: 30px;
}
.el-pagination--small .btn-prev,
.el-pagination--small .el-pager li, .el-pagination--small .el-pager li.btn-quicknext,
.el-pagination--small .el-pager li:last-child,
.el-pagination--small .btn-next,
.el-pagination--small .el-pager li{
  font-size: 16px;
  line-height: 30px;
  height: 30px;
}
.el-pager .number {
  border-bottom: none;
}
.el-pager .more {
  border-bottom: none;
}
.el-menu{
  background: none;
}
.el-submenu .el-submenu__title{
  font-size: 18px;
  // color: #305792;
  height: 60px;
  line-height: 60px;
}
.el-submenu.is-opened .el-submenu__title{
  font-size: 18px;
  font-weight: bold;
  color: #305792;
  height: 60px;
  line-height: 60px;
}
.el-submenu__title i{
  font-size: 16px;
  font-weight: bold;
}
.el-submenu.is-opened .el-submenu__title i{
  color: #305792;
}
.el-menu-item{
  font-size: 18px;
  height: 60px;
  line-height: 60px;
}
.el-menu-item:hover{
  font-size: 18px;
  font-weight: bold;
  color: #305792;
  height: 60px;
  line-height: 60px;
  background: none;
}
.el-menu-item.is-active{
  font-size: 18px;
  font-weight: bold;
  color: #305792;
  height: 60px;
  line-height: 60px;
  background: none;
  .wz{
    color: #305792;
  }
}
.el-submenu .el-menu-item{
  font-size: 14px;
  height: 42px;
  line-height: 42px;
}
.el-submenu .el-menu-item:hover{
  font-size: 14px;
  height: 42px;
  line-height: 42px;
  background: #ffffff;
  border-left:3px solid #305792;
}
.el-submenu .el-menu-item.is-active{
  font-size: 14px;
  height: 42px;
  line-height: 42px;
  background: #ffffff;
  border-left:3px solid #305792;
  .wz{
    color: #305792;
  }
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
  background: none;
  color: #000000;
  font-size: 16px;
}
</style>
<script setup name="list">
import headIndex from "./components/headIndex/index.vue";
import footIndex from "./components/footIndex/index.vue";
// import menuTree from './components/menuTree/index.vue'
// menuTree: () => import('./components/menuTree/index.vue')
import { listpassInfo } from "@/api/yxzx/info";
import { leftCategorylist } from '@/api/yxzx/home'
export default {
  components: {
    headIndex,
    footIndex,
  },
  data() {
    return {
      n_input: '',
      contList: [],
      noticeList: [],
      flimList: [],
      status: 0,
      retotal: 0,
      pageindex: 1,
      pagesize: 16,
      reCount: 0,
      newsList: [],
      wzTitle: "",
      listId: this.GetQueryString("catid"),
      firstName: '',
      secondtName: '',
      activeIndex: '',      
      getId: '',
      num: 0,
    };
  },
  created() {
    this.getList(this.listId)
    
  },
  methods: {
    // 搜索方法
    searchCont(){
      if(this.s_input == ''){
        this.$message.error('您未输入搜索内容！');
      } else {
        this.$router.push({
          path:'/search',
          query: {
            text: this.n_input
          }
        });
      }
      // this.$alert('该功能正在开发中！', '提示', {
      //   confirmButtonText: '确定',
      //   callback: action => {              
      //   }
      // });
    },
    valueChange(val) {
      val.map((item,index) => {
        if (item.categoryid == this.listId) {
          this.firstName = item.categoryname
          if(this.firstName == '医院动态'){
            this.num = 1
          } else if (this.firstName == '通知公告'){
            this.num = 2
          } else if (this.firstName == '领导讲话'){
            this.num = 3
          } else if (this.firstName == '政策法规'){
            this.num = 4
          } else if (this.firstName == '军内要闻'){
            this.num = 5
          } else if (this.firstName == '科普之声'){
            this.num = 6
          } else if (this.firstName == '医教研讯'){
            this.num = 7
          } else if (this.firstName == '东总周会'){
            this.num = 8
          } else if (this.firstName == '时政论坛'){
            this.num = 11
          } else if (this.firstName == '视频新闻'){
            this.num = 12
          } else if (this.firstName == '表扬激励'){
            this.num = 15
          } else if (this.firstName == '基层风采'){
            this.num = 17
          }
        } else if (item.categoryname == '通知公告'){
          if(this.listId == item.categoryid){
            return 
          } else {
            listpassInfo(item.categoryid,"",1,5).then((response) => {
              this.noticeList = response.InfoList;
            });
          }   
        } else if (item.categoryname == '视频新闻'){
          if(this.listId == item.categoryid){
            return           
          } else {
            listpassInfo(item.categoryid,"",1,5).then((response) => {
              this.flimList = response.InfoList;
            });
          }
          
          
        }
      })
    },
    handleSelect(val){
      this.secondtName = val.split('/')[1]
      this.getId = val.split('/')[0]
      this.getList(this.getId)
    },
    goList(index,item){
      this.status = index

    },
    choice(index,name,id) {
      this.status = index;
      this.listId = id
      this.wzTitle = name
      if(name == '专家团队') {
        window.location.href =  '/expert?id=' +id
      } else {
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageindex = val;
      this.getList(this.listId)
    },
    getList(id) {
      listpassInfo(
        id,
        "",
        this.pageindex,
        this.pagesize
      ).then((response) => {
        this.contList = response.InfoList;
        if(this.firstName == '视频新闻'){
          this.flimList = response.InfoList.slice(0,5);
        } else if(this.firstName == '通知公告'){
          this.noticeList = response.InfoList.slice(0,5);
        }       
        this.retotal = response.PageInfo.recordCount;
        this.reCount = response.PageInfo.recordCount;
      });
    },
    // 获取地址栏的参数
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      } else {
        return null;
      }
    },

    // 获取树形结构左侧栏目
    tree(data, name) {
      for (let i = 0; i < data.length; i++) {
        let item = data[i]
        if (item.categoryname === name) {
          return item.categoryid
        } else {
          if (item.xiajicategorylist && item.xiajicategorylist.length > 0) {
            let res = tree(item.xiajicategorylist, name)
            if (res) return res
          }
        }
      }
    }
  },
};
</script>
